<template>
<div class="flex-1 h-[300px]" >
        <div class="enterList">
            <el-button class="ed-button ed_black-bottom text-left ed-button36" @click="synchronizate" ><svg-icon icon-class="synchronizate"/>同步设备</el-button>
        </div>
        <ApiTable :api="api.queryDeviceList" ref="table" :params="configQueryForm">
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="deviceId" label="设备序列号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="devicePlace" label="设备地点" :formatter="formatter"></el-table-column>
        </ApiTable>
        <el-dialog custom-class="success_info" width="160px" :visible.sync="data.dialogVisible" :close-on-click-modal="false" :show-close="false">
            <el-result icon="success" title="设备同步成功">
            </el-result>
        </el-dialog>
        
        <el-dialog custom-class="error_info"  width="160px" :visible.sync="data.errorDdialogVisible" :close-on-click-modal="false" :show-close="false">
            <el-result icon="error" title="设备同步失败">
            </el-result>
        </el-dialog>
</div>
</template>
<script setup lang="ts">
import ApiTable from 'src/components/ApiTable.vue'
import * as api from './api'
// import message from 'src/utils/once-message'
import router from 'src/router'
import store from 'src/store'
import { onActivated,onMounted,nextTick, ref, reactive,defineProps } from 'vue'
import { Village } from '../../../types'
import { Interface } from '../api'

const props = defineProps<{
    interface:Interface,
    village: Village
}>()

const configQueryForm= reactive({
    villageId:props.village.id,
    typeCode:props.interface.code,
})
                
const table = ref()
const data = reactive({
    dialogVisible:false,
    errorDdialogVisible:false
})
onMounted(()=>{
    nextTick(()=>{
        table.value.load(1)
    })
})
function synchronizate() {
    // 门禁同步 deviceDevType：1（视频）  deviceDevType：8（门禁）
    api.synchronizate({villageId:props.village.id,deviceDevType:8}).then(response => {
        if (response.success) {
            data.dialogVisible = true
            table.value.load()
            setTimeout(()=>{
                data.dialogVisible = false
            }, 2000)
        } else {
            data.errorDdialogVisible = true
            table.value.load()
            setTimeout(()=>{
                data.errorDdialogVisible = false
            }, 2000)
        }
    })
}

function formatter(row:any, column:any, cellValue:any, index:any){
    return cellValue || '-'
}
</script>

<style scoped lang="scss">
.enterList{
    text-align: right;
    padding: 10px;
    height: 56px;
}
:deep(.api-table){
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
}
:deep(.el-dialog){
    margin-top: 0 !important;
    top: 50%;
    transform: translateY(-50%);
}
:deep(.success_info.el-dialog){
    height: 160px;
    .el-dialog__header{
        padding: 0;
    }
    .el-dialog__body{
        width: 100%;
        height: 100%;
        padding: 0;
        background: #EBF9F5;
        border: 1px solid #D8F3E8;
        border-radius: 8px;
        .el-result{
            height: 100%;
            .el-result__icon svg{
                fill: #65A9A5;
            }
            .el-result__title p{
                color: #65A9A5;
                font-size: 16px;
            }
        }
       
    }
} 
:deep(.error_info.el-dialog){
    height: 160px;
    .el-dialog__header{
        padding: 0;
    }
    .el-dialog__body{
        width: 100%;
        height: 100%;
        padding: 0;
        background: #FEF0F0;
        border: 1px solid #FFD7D7;
        border-radius: 8px;
        .el-result{
            height: 100%;
            .el-result__icon svg{
                fill: #EE7171;
            }
            .el-result__title p{
                color: #EE7171;
                font-size: 16px;
            }
        }
       
    }
} 
</style>